<template>
  <el-header :height="'64px'" class="header-page" style="-webkit-app-region: drag">
    <!-- 标志 -->
    <div class="logo-box">
      <img class="logo-img" src="../assets/images/jvchat.png" alt />
      <span class="logo-title can-not-select">聚聊客服</span>
    </div>
    <!-- 导航 -->
    <ul class="nav-ul">
      <li
        class="nav-li"
        style="-webkit-app-region: no-drag"
        :class="{'active-nav':$route.path === nav.navPath}"
        v-for="(nav, index) in navs"
        :key="index"
        @click="showPath(nav)"
      >
        <i :class="nav.navIcon" aria-hidden="true"></i>
        <span class="nav-name can-not-select" v-text="nav.navName"></span>
      </li>
      <!-- <li class="nav-li">
        <i class="fa fa-github-alt fa-lg" aria-hidden="true"></i>
        <span class="nav-name can-not-select">自动回复</span>
      </li>-->
      <!-- <li class="nav-li">
        <i class="fa fa-bar-chart-o fa-lg" aria-hidden="true"></i>
        <span class="nav-name can-not-select">收款账单</span>
      </li>-->
    </ul>
    <!-- 系统通知 -->
    <el-dropdown
      class="my-el-dropdown"
      style="-webkit-app-region: no-drag;margin-right:10px"
    >
      <div class="el-dropdown-link">
        <i class="el-icon-bell" style="font-size:24px"></i>
        <span class="nick-name can-not-select">通知</span>
      </div>
      <el-dropdown-menu slot="dropdown">
        <div class="yuedu-box" v-if="notilist.length>0">  
          <span @click="ready()" >一键已读</span>
        </div>
        <div class="yuedu-no-box"  v-else> 
          <span>暂无最新通知</span>
        </div>
        <ul class="xitongtongzhi">
          <li v-for="(item,index) in notilist" :key="index">
            <div class="list-line">
             <span class="title">{{item.noticeContent}}</span> <span @click="ready(item.noticeId)" class="status">{{item.status|formatStatus}}</span>
            </div>
            <div class="data">{{item.createTime|formatDate}}</div>
          </li>
        </ul>
      </el-dropdown-menu>
    </el-dropdown>

    <!-- 下拉菜单 -->
    <el-dropdown
      class="my-el-dropdown"
      @command="handleCommand"
      style="-webkit-app-region: no-drag"
    >
      <div class="el-dropdown-link">
        <el-avatar icon="el-icon-user-solid" size="small"></el-avatar>
        <span class="nick-name can-not-select" v-text="this.$store.getters.currentUser.NickName"></span>
      </div>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item disabled>
          <i class="fa fa-plus-square" aria-hidden="true"></i>其他
        </el-dropdown-item>
        <el-dropdown-item disabled>
          <i class="fa fa-question-circle" aria-hidden="true"></i>帮助
        </el-dropdown-item>
        <el-dropdown-item command="logout">
          <i class="fa fa-sign-out" aria-hidden="true"></i>退出
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <!--electron 最大|最小|关闭 -->
    <div
      style="-webkit-app-region: no-drag"
      class="menu"
      v-if="$store.getters.currentMode === 'electron'"
    >
      <div class="icon-smaller" @click="minimizeWindow()">
        <hr class="smaller" />
      </div>
      <div class="icon-bigger" @click="maximizeWindow()">
        <div class="bigger"></div>
      </div>
      <div class="icon-close" @click="hiddenWindow()">
        <div class="close"></div>
      </div>
    </div>
  </el-header>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: 'HeaderPage',
  filters:{
    formatDate(val) {
      let date = new Date(val);
      let YY = date.getFullYear() + '-';
      let MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      let DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
      let hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
      let mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
      let ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
      return YY + MM + DD +" "+hh + mm + ss;
    },
    formatStatus(status){
      if(status===0){
        return '未读';
      }else{
        return '已读';
      }
    }
  },
  data() {
    return {
      navs: [
        {
          navName: '会话',
          navIcon: 'fa fa-h-square fa-lg',
          navPath: '/conversation',
        },
        {
          navName: '群发',
          navIcon: 'fa fa-paper-plane-o fa-lg',
          navPath: '/group-assistant',
        },
        {
          navName: '朋友圈',
          navIcon: 'fa fa-chrome fa-lg',
          navPath: '/friend-circle',
        },
        // {
        //   navName: '群运营',
        //   navIcon: 'fa fa-pie-chart fa-lg',
        //   navPath: '/group-assistant',
        // },
        {
          navName: '功能大全',
          navIcon: 'fa fa-th-large fa-lg',
          navPath: '/tools',
        },
      ]
    }
  },
   computed: {
    ...mapGetters({
      notilist: 'conversation/notilist',
    }),
    ids(){
      let arr=[];
      this.notilist.forEach(item => {
        arr.push(item.noticeId)
      });
      return arr;
    }
   },
  created(){
     this.$store.dispatch('websocket/GetNoticeList')
  },
  methods: {
    // 路由跳转
    showPath(nav) {
      if (this.$route.path === nav.navPath) return
      // 新的页面展示
      this.$router.push({ path: nav.navPath })
    },
    // 已读
    ready(id){
      let ids =id?[id]:this.ids;
      this.$store.dispatch('websocket/CloseNoticeList',ids)
    },
    // 处理下拉菜单
    handleCommand(command) {
      switch (command) {
        case 'logout':
          // 退出之前需要二次确认
          this.$confirm('你将退出登陆 ?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // 确认退出后，向服务端通知
            this.$store.dispatch('websocket/AccountLogoutNotice')
            // 设置logined为0
            this.$store.commit('websocket/SET_LOGINED', 0)
            // 清除token
            this.$store.commit('SET_TOKEN', '')
          }).catch(() => {
            // this.$message({
            //   type: 'info',
            //   message: '已取消退出登陆'
            // });
          });
          break;
        default:
          this.$message('click on item ' + command);
          break;
      }
    },
    // 最小化
    minimizeWindow() {
      this.$ipcRenderer.send('operations', 'min')
    },
    // 最大化
    maximizeWindow() {
      this.$ipcRenderer.send('operations', 'max')
    },
    // 自定义窗口操作
    hiddenWindow() {
      this.$ipcRenderer.send('operations', 'hidden')
    }
  }
}
</script>

<style lang="scss" scoped>
.header-page {
  display: flex;
  align-items: center;
  background-color: $bg-color-nav-title-1;

  .logo-box {
    display: flex;
    align-items: center;
    .logo-img {
      width: 40px;
    }
    .logo-title {
      color: #fff;
      font-size: 28px;
      margin-left: 10px;
      margin-right: 20px;
    }
  }

  .nav-ul {
    color: rgba($color: #fff, $alpha: 0.6);
    display: flex;
    flex: 1 1 auto;
    .nav-li {
      padding: 5px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .fa {
        height: 30px;
        width: 30px;
        text-align: center;
        line-height: 30px;
      }
      .nav-name {
        font-size: 16px;
        margin-top: 2px;
      }
      &:hover {
        cursor: pointer;
        color: #fff;
      }
    }
    .active-nav {
      color: #fff;
    }
  }

  .my-el-dropdown {
    // margin-right: 20px;
    .el-dropdown-link {
      display: flex;
      align-items: center;
      color: white;
      text-align: center;
      .nick-name {
        font-size: 16px;
        margin: 0 5px;
      }
    }
  }

  .menu {
    width: 100px;
    height: 20px;
    display: flex;
    align-items: center;
    margin-left: 20px;
    justify-content: space-between;
    .icon-smaller,
    .icon-bigger {
      width: 20px;
      height: 20px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      cursor: pointer;
      .bigger {
        width: 10px;
        height: 10px;
        border: solid white 1px;
      }
      .smaller {
        width: 10px;
        border: solid white 1px;
      }
      &:hover {
        background: #c3c3c3;
      }
    }
    .icon-close {
      width: 20px;
      height: 20px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      cursor: pointer;
      .close {
        position: relative;
        width: 2px;
        height: 15px;
        background: #fff;
        transform: rotate(45deg);
        display: inline-block;
      }
      .close:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 2px;
        height: 15px;
        background: #fff;
        -webkit-transform: rotate(270deg);
        -moz-transform: rotate(270deg);
        -o-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
        transform: rotate(270deg);
      }
      &:hover {
        background: red;
      }
    }
  }
}
.xitongtongzhi{
  width: 400px;
  min-height: 10px;
  max-height: 400px;
  padding:0 10px;
  overflow: auto;
  li{
    border-bottom: 1px solid #eee;
    padding: 5px ;
    .list-line{
     display: flex;
      line-height: 25px;
      .title{
          flex: 1;
          font-size: 14px;
        }
        .status{
          width: 60px;
          text-align: center;
          font-size: 12px;
          color: #333;
          background: #eee;
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
        }
    }
    .data{
      font-size: 12px;
      color: #333;
    }
  }
}
.yuedu-box{
  text-align: right;
  span{
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    background:#eee;
    cursor: pointer;
    margin: 10px 20px;
  }
}
.yuedu-no-box{
  text-align:center;
  color: #999;
}
</style>
